<template>
  <div>
    <topBar/>
    <el-row>
      <el-col :span="8" :offset="3"> <el-image class="c" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image></el-col>
      <el-col :span="8" :offset="3"><el-steps  :active="0" finish-status="success">
        <el-step title="购物车"></el-step>
        <el-step title="确认订单"></el-step>
        <el-step title="支付"></el-step>
        <el-step title="评价"></el-step>
       </el-steps></el-col>
    </el-row>
    <el-col :span="19" :offset="3">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1>购物车</h1>
      </div>
      <div   class="text item">



    <el-table
      :data="dataTable"
      :summary-method="getSummaries"
      show-summary
      style="width: 100%">
      <el-table-column
        type="selection"
        label="全选"
        width="55">
      </el-table-column>
      <el-table-column
        prop="goods"
        label="商品"
        width="380">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.goods.url"
            fit="contain"></el-image>
          <span style="margin-left: 10px">{{ scope.row.goods.des }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="info"
        label="商品信息"
        width="380">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价" width="80">
      </el-table-column>
      <el-table-column
        prop="count"
        label="数量" width="200">
        <template slot-scope="scope">
          <el-input-number size="mini"  @change="handleChange(scope)" v-model="scope.row.count" :min="1" :max="999" ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="sub"
        label="小计">
        <template slot-scope="scope">
          <span>￥{{scope.row.sub}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col   :offset="20">
      <el-button type="danger">去结算</el-button>
    </el-col>
      </div>
    </el-card>
  </el-col>
    <myfooter/>
  </div>
</template>

<script>
  import topBar from '@/components/topBar'
  import myfooter from '@/components/myfooter'
  import middle from '@/components/middle'
  import {toMoney }from '@/utils/number'

  export default {
    components:{ topBar,myfooter,middle},
    name: "index",
    data() {
      return {
        webintro2:null,
        num: 1,
        dataTable:[
          {
            goods:{
              url:"http://img.tea7.com/0012961_0.jpeg?x-oss-process=image/resize,w_300",
              des:"武夷原产 全芽黄芽金骏眉 2號150g"
            },
            info:"xxx",
            price:'99.00',
            count:1,
            sub:1,
          },
          {
            goods:{
              url:"http://img.tea7.com/0012961_0.jpeg?x-oss-process=image/resize,w_300",
              des:"daaaa"
            },
            info:"CCC",
            price:'22.00',
            count:1,
            sub:1,
          }
        ]
      }
    },
    methods: {
      handleChange(scope){
        scope.row.sub=toMoney(scope.row.count * scope.row.price)
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
         console.log(columns)
         console.log(data)
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if(index<4){
            sums[index] = '';
          }else {
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  if(index===4) {
                    return Number(prev) + Number(curr)
                  }
                    return toMoney(Number(prev) + Number(curr))
                } else {
                  return prev
                }
              }, 0)
              if(index===4){
                sums[index]  ='商品'+ sums[index]+' 个'
              }else {
                sums[index]  = '总计'+sums[index] +' 元(不包含运费)'
              }
            } else {
              sums[index] = ''
            }
          }
        });

        return sums;
      }
    }
  }
</script>

<style scoped>
 .c{
   height: 60px;
 }
  .box-card{
    min-height: 700px;
  }
</style>
